<template>
  <div class="auth_container">
    <view class="form_container">

      <van-cell-group inset>


        <van-cell
          title="头像"

          title-class="theme_color"
        >
          <van-image width="100" height="100"
                     @click="onUploadImg('user_head_img')"
                     :src="userinfo.user_head_img"
                      slot="right-icon"
          />
        </van-cell>

        <van-field
          :value="userinfo.username"
          placeholder="请输入用户名"
          label="用户名"
          label-class="theme_color"
          @input="onAuthNameInput"
          clearable
          required
        />
        <van-field
          :value="userinfo.phone"

          label="手机号"
          placeholder="请输入手机号"
          autosize
          label-class="theme_color"
          maxlength="11"
          @input="onAuthNumberInput"
          clearable
          required

        />



        <view class="bottom">
          <view class="verify_button" @click="formSubmit">保存</view>
        </view>


      </van-cell-group>


    </view>
    <view class="safeBottom"></view>
    <van-toast id="van-toast" />

  </div>
</template>

<script>
import {doResponse, uploadImg} from "../../../requests/tools";

import {getUserInfo, updateUserInfo} from "../../../requests/user";
import Toast from "../../../../static/vant/toast/toast";

var $this;
export default {
  name: "uc_container",
  components: {},
  data() {
    return {
      userinfo: {
        username: "",
        phone: "",
        user_head_img: ""
      },
      tmpl_img: "",
    };
  },
  methods: {
    initPage() {
      /**
       * 获取用户信息
       */
      getUserInfo().then(res => {
        $this.userinfo = res.data
      })
    },
    /**
     * 图片上传
     * @param event
     */
    onUploadImg(event) {
      if ($this.userinfo.status === 1 || $this.userinfo.status === 2) {
        return false
      }

      uploadImg($this);
      let intv = setInterval(() => {
        if ($this.tmpl_img) {
          $this.userinfo[event] = $this.tmpl_img;
          $this.tmpl_img = "";
          clearInterval(intv)
        }
      }, 1000)
    },

    /**
     * 用户名输入
     * @param event
     */
    onAuthNameInput(event) {
      $this.userinfo.username = event.mp.detail;
    },
    /**
     * 手机号输入
     * @param event
     */
    onAuthNumberInput(event) {
      $this.userinfo.phone = event.mp.detail;
    },
    /**
     * 表单调整
     */
    formSubmit() {
      if (!$this.userinfo.username){
        Toast.fail('请输入用户名');
        return false;
      }
      if (!$this.userinfo.phone){
        Toast.fail('请输入电话');
        return false;
      }
      if ($this.userinfo.phone.length < 11){
        Toast.fail('请输入正确手机号');
        return false;
      }

      updateUserInfo($this.userinfo).then(res=>{
        doResponse(res)
      })

    }
  },
  created() {
    $this = this;
  },
  onLoad(params) {
    $this.initPage();
  }
};
</script>

<style>
.theme_color {
  color: #586ba9 !important;
  font-weight: bold;
}
</style>
<style scoped>
@import "index.css";
</style>
